<template>
	<div class="dataVisualize-box">
		<div class="card top-box">
			<div class="top-title">数据可视化</div>
			<el-tabs v-model="data.activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
			</el-tabs>
			<div class="top-content">
				<div class="item-left sle">
					<span class="left-title">访问总数</span>
					<div class="img-box">
						<img src="./images/book-sum.png" alt="" />
					</div>
					<span class="left-number">{{ data.bookSum }}</span>
				</div>
				<div class="item-center">
					<div class="gitee-traffic traffic-box">
						<div class="traffic-img">
							<img src="./images/add_person.png" alt="" />
						</div>
						<span class="item-value">2222</span>
						<span class="traffic-name sle">Gitee 访问量</span>
					</div>
					<div class="gitHub-traffic traffic-box">
						<div class="traffic-img">
							<img src="./images/add_team.png" alt="" />
						</div>
						<span class="item-value">2222</span>
						<span class="traffic-name sle">GitHub 访问量</span>
					</div>
					<div class="today-traffic traffic-box">
						<div class="traffic-img">
							<img src="./images/today.png" alt="" />
						</div>
						<span class="item-value">4567</span>
						<span class="traffic-name sle">今日访问量</span>
					</div>
					<div class="yesterday-traffic traffic-box">
						<div class="traffic-img">
							<img src="./images/book_sum.png" alt="" />
						</div>
						<span class="item-value">1234</span>
						<span class="traffic-name sle">昨日访问量</span>
					</div>
				</div>
				<div class="item-right">
					<div class="echarts-title">Gitee / GitHub 访问量占比</div>
					<div class="book-echarts">
						<Pie :data="pieData" />
					</div>
				</div>
			</div>
		</div>
		<div class="card bottom-box">
			<div class="bottom-title">数据来源</div>
			<div class="bottom-tabs">
				<el-tabs v-model="data.activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="curve-echarts">
				<Curve :data="curveData" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="dataVisualize">
import { ref, reactive, onMounted, watch } from 'vue'
import { randomNum } from '@/utils/util'
import Pie from './components/pie.vue'
import Curve from './components/curve.vue'

const data = reactive({
	activeName: 1,
	bookSum: '848.132w'
})
const handleClick = (): void => {}
let tab = [
	{ label: '未来7日', name: 1 },
	{ label: '近七日', name: 2 },
	{ label: '近一月', name: 3 },
	{ label: '近三月', name: 4 },
	{ label: '近半年', name: 5 },
	{ label: '近一年', name: 6 }
]

const pieData = ref<any[]>([])
const curveData = ref<any[]>([])

// 模拟数据
const initChartsData = () => {
	pieData.value = [
		{ value: randomNum(4000, 5000), name: 'Gitee 访问量' },
		{ value: randomNum(4000, 5000), name: 'GitHub 访问量' }
	]
	curveData.value = [
		{ value: randomNum(0, 100), spotName: '掘金' },
		{ value: randomNum(0, 100), spotName: 'CSDN' },
		{ value: randomNum(0, 100), spotName: 'Gitee' },
		{ value: randomNum(0, 100), spotName: 'GitHub' },
		{ value: randomNum(0, 100), spotName: '知乎' },
		{ value: randomNum(0, 100), spotName: 'MyBlog' },
		{ value: randomNum(0, 100), spotName: '简书' },
		{ value: randomNum(0, 100), spotName: 'StackOverFlow' },
		{ value: randomNum(0, 100), spotName: '博客园' }
	]
}

watch(
	() => data.activeName,
	() => {
		initChartsData()
	}
)

onMounted(() => {
	initChartsData()
})
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
